import React, { lazy, Suspense } from 'react';
import { inject, observer } from 'mobx-react';
import Api from '../../config';

import './footer.css';

import { Slider } from 'antd';
const Progress = lazy(() => import('../progress'));

const roundTypes = [{
    name: "顺序播放",
    icon: "iconfont icon-shunxubofang",
    value: "sort"
}, {
    name: "单曲循环",
    icon: "iconfont icon-danquxunhuan",
    value: "single"
}, {
    name: "随机播放",
    icon: "iconfont icon-suijibofang",
    value: "random"
}]

@inject("MainStore")
@inject("FooterStore")
@observer
class Footer extends React.Component {

    constructor(props) {
        super(props);
        this.audio = null;//定义audio
    }

    componentDidMount() {
        document.addEventListener('keyup', this.handlerKeyUp);
    }

    /* 空格键控制播放暂停 */
    handlerKeyUp = (e) => {
        if (e.keyCode === 32 && e.target.tagName !== "INPUT") {
            this.controlPlay();
        }
    }

    //控制播放暂停
    controlPlay = () => {
        if (!this.props.FooterStore.isplay) {
            this.audio.play();
        } else {
            this.audio.pause();
        }
        this.props.FooterStore.handlerPlay(!this.props.FooterStore.isplay);
    }

    // 控制播放进度条
    handlerDragNowTime = (time) => {
        this.audio.currentTime = time;
        this.props.MainStore.setNowTime(time);
    }

    //上一曲
    handlerPreMusic = () => {
        const {
            activeRoundTypesIndex
        } = this.props.FooterStore;
        const { lists } = this.props.MainStore;
        const { hash } = this.props.MainStore.music;
        if (activeRoundTypesIndex === 2) {
            //随机
            if (lists.length > 0) {
                let index = Math.floor(Math.random() * lists.length);
                this.getMusicInfo(lists[index].FileHash, lists[index].AlbumID)
            }
        } else {
            let index = lists.findIndex((list, index) => {
                return hash === list.FileHash
            });
            let nextIndex = (index - 1) < 0 ? (lists.length - 1) : (index - 1);
            this.getMusicInfo(lists[nextIndex].FileHash, lists[nextIndex].AlbumID)
        }
    }

    //下一曲
    handlerNextMusic = () => {
        const {
            activeRoundTypesIndex,
        } = this.props.FooterStore;
        const lists = this.props.MainStore.lists;
        const { hash } = this.props.MainStore.music;

        if (activeRoundTypesIndex === 2) {
            if (lists.length > 0) {
                let index = Math.floor(Math.random() * lists.length);
                this.getMusicInfo(lists[index].FileHash, lists[index].AlbumID)
            }
        } else {
            //获取当前歌曲在列表中的index
            let index = lists.findIndex((list, index) => {
                return hash === list.FileHash
            });
            let nextIndex = (index + 1) >= lists.length ? 0 : (index + 1);
            this.getMusicInfo(lists[nextIndex].FileHash, lists[nextIndex].AlbumID)
        }
    }

    //获取音乐详情
    getMusicInfo = (FileHash, AlbumID) => {
        Api.get(Api.detailUrl, {
            r: "play/getdata",
            hash: FileHash,
            album_id: AlbumID
        }).then(res => {
            this.props.MainStore.selectMusic(res);
            this.props.FooterStore.handlerPlay(true);
        })
    }
    //更换随机播放、顺序播放、单曲循环
    handlerRoundType = () => {
        let index = this.props.FooterStore.activeRoundTypesIndex + 1;
        if (index > 2) {
            index = 0;
        }
        this.props.FooterStore.loopControl(index);
    }

    //声音控件Slider事件
    handlerOnChange = (value) => {
        if (value === 0) {
            this.props.FooterStore.volumeControl(value);
            this.audio.volume = 0;
        } else {
            this.props.FooterStore.volumeControl(value);
            this.audio.volume = value;
        }
    }

    //声音图标点击事件
    handlerVolume = () => {
        if (this.props.FooterStore.volume === 0) {
            this.props.FooterStore.volumeControl(0.5);
            this.audio.volume = 0.5;
        } else {
            this.props.FooterStore.volumeControl(0);
            this.audio.volume = 0;
        }
    }

    //动态生成audio
    renderAudio = (play_url, isplay) => {
        const { handlerPlay, activeRoundTypesIndex, volume } = this.props.FooterStore;
        const { setFullTime, setNowTime } = this.props.MainStore
        if (!!play_url) {
            return React.createElement('audio', {
                ref: (ref) => this.audio = ref,
                src: play_url,
                autoPlay: isplay && !!play_url,
                loop: activeRoundTypesIndex === 1,
                onCanPlay: () => { setFullTime(this.audio.duration); this.audio.volume = volume },
                onTimeUpdate: (e) => setNowTime(this.audio.currentTime),
                onEnded: () => { handlerPlay(false); this.handlerNextMusic() },
                onError: () => { this.handlerNextMusic(); }
            })
        }
    }

    render() {
        const { isplay, volume, activeRoundTypesIndex } = this.props.FooterStore;
        const { fullTime, nowTime } = this.props.MainStore;
        const { song_name, author_name, play_url } = this.props.MainStore.music;
        let playStyle = {
            title: isplay && !!play_url ? "暂停[空格键]" : "播放[空格键]",
            icon: isplay && !!play_url ? "iconfont icon-zanting" : "iconfont icon-bofang"
        }
        return (
            <div className="components-footer">
                {this.renderAudio(play_url, isplay)}
                <div className="play-controller">
                    <span className="pre-icon" title="上一曲[←]" onClick={this.handlerPreMusic}><i className="iconfont icon-shangyiqu"></i></span>
                    <span className="play-icon" title={playStyle.title} onClick={this.controlPlay}><i className={playStyle.icon}></i></span>
                    <span className="next-icon" title="下一曲[→]" onClick={this.handlerNextMusic}><i className="iconfont icon-xiayiqu"></i></span>
                </div>
                <div className="song-info">
                    <div className="song-info-top">
                        <div className="song-info-name">
                            <a>{song_name}</a>
                            <span className="song-info-split">-</span>
                            <a>{author_name}</a>
                        </div>
                        <div className="song-info-fuc">
                            <ul>
                                <li title="收藏"><i className="iconfont icon-xiai"></i></li>
                                <li title="添加到歌单"><i className="iconfont icon-tianjia"></i></li>
                                <li title="下载"><i className="iconfont icon-xiazai"></i></li>
                                <li title="分享"><i className="iconfont icon-fenxiang"></i></li>
                                <li title="听相似歌曲"><i className="iconfont icon-xiangsi"></i></li>
                                <li title="发送到移动设备"><i className="iconfont icon-phone"></i></li>
                            </ul>
                        </div>
                    </div>
                    <Suspense>
                        <Progress fullTime={fullTime} nowTime={nowTime} dragNowTime={this.handlerDragNowTime} />
                    </Suspense>
                </div>
                <div className="song-func">
                    <div className="song-round" data-value={roundTypes[activeRoundTypesIndex].value} title={roundTypes[activeRoundTypesIndex].name} onClick={this.handlerRoundType}>
                        <i className={roundTypes[activeRoundTypesIndex].icon}></i>
                    </div>
                    <div className="song-volume">
                        <span className="song-volume-icon" onClick={this.handlerVolume}><i className={volume > 0 ? "iconfont icon-shengyin" : "iconfont icon-jingyin"}></i></span>
                        <div className="song-volume-slider">
                            <Slider value={volume} min={0} max={1} step={0.1} tipFormatter={null} onChange={this.handlerOnChange} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Footer;